<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器</title>
    <style >
        *{
            padding: 0;
            margin: 0;
        }

        ul{
            list-style: none;
        }

        ul li{
            margin: 20px 20px;
            padding: 10px 5px;
            border-radius: 3px;
        }

        ul li.active{
            background-color: green;
        }
    </style>
</head>
<body>
    <script src="./vue.js"></script>

    <div id="app">
        <audio :src="currentSrc" controls autoplay @ended='handleEnded'></audio>
        <ul>
            <li :class='{active:index===currentIndex}' v-for='(item,index) in musicData' :key='item.id' 
            @click='handleClick(item.songSrc,index)'>
                <h2>{{item.id}}--歌名：{{item.name}}</h2>
                <p>{{item.author}}</p>
            </li>
        </ul>
        <button @click='handleNext'>下一首</button>
    </div>


    <script>
        const musicData = [{
            id: 1,
            name: '妖痴天下潮剧情版',
            author: '妖痴',
            songSrc: './static/妖痴天下潮剧情版.mp3'
        },
        {
            id: 2,
            name: '尹姝贻白夜',
            author: '尹姝贻',
            songSrc: './static/尹姝贻白夜.mp3'
        },
        {
            id: 3,
            name: '明洋安河桥',
            author: '明洋',
            songSrc: './static/明洋安河桥.mp3'
        },
        {
            id: 4,
            name: '歌之初乐队紫东欢乐歌',
            author: '歌之初乐队',
            songSrc: './static/歌之初乐队紫东欢乐歌.mp3'
        },
    ]
        
        new Vue({
            el: "#app",
            data: {
                musicData,
                currentSrc: './static/妖痴天下潮.mp3',
                currentIndex: 0
            },
            methods: {
                handleClick(src, index){
                    this.currentSrc = src;
                    this.currentIndex = index;
                },
                handleEnded() {
                // this.currentIndex++;
                // this.currentSrc = this.musicData[this.currentIndex].songSrc;
                this.handleNext();
                },
                handleNext() {
                    this.currentIndex++;
                    console.log(this.currentIndex)
                    if (this.currentIndex === this.musicData.length) {
                        this.currentIndex = 0;
                    }

                    this.currentSrc = this.musicData[this.currentIndex].songSrc
                }
            }
        })
    </script>
</body>
</html>